<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map.Entry" %>
<%@ page errorPage="index.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加新词</title>
</head>
<% 
	@SuppressWarnings("unchecked")
	List<Entry<String, String>> newWords = (List<Entry<String, String>>) session.getAttribute("newWords");
%>
<style type='text/css'>
a {
	text-decoration: none;
}
[tag] {
	outline: red solid 2px;
}
table {
	background: black;
	margin: 10px;
}
tr {
	background: white;
}
th {
	color: red;
}
</style>
<body>
<h2>以下是你想加入字典的新词吗？</h2>
<div id='dict'></div>

<script type="text/javascript">
function Entry(name, type) {
	this.name = name;
	this.type = type;
}
Entry.prototype.getId = function (i) {
	return "new-word-" + i;
};
Entry.prototype.toHTML = function (i) {
	return "<tr id='" + this.getId(i) + "'>" +
			"<td id='" + this.getId(i) + "-name'>" + this.name + "</td>" +
			"<td id='" + this.getId(i) + "-type'>" + this.type + "</td>" +
			"<td><a href='javascript:void(0)' onclick='remove(this)'>remove</a></td></tr>";
};

var newWords = [];
<%
	for (Entry<String, String> newWord : newWords) {
		out.println("newWords.push(new Entry('" + newWord.getKey() + "', '" + newWord.getValue() + "'));");
	}
%>

function newWords2HTML() {
	var html = "<table cellpadding='3px'><tr><th>名字</th><th>类型</th>" + 
				"<th style='width:50px'></th></tr>";
	for (var i = 0; i < newWords.length; i ++) {
		if ( newWords[i] ) {
			html += newWords[i].toHTML(i);
		}
	}
	return html + "</table>";
}

function reDraw() {
	document.getElementById('dict').innerHTML = newWords2HTML();
}
reDraw();

function remove(obj) {
	var index = obj.parentElement.parentElement.id.replace('new-word-', '');
	delete newWords[index];
	reDraw();
}

function submitNewWords() {
	var postForm = document.createElement('form');
	postForm.method = 'post';
	postForm.action = 'AddDict';
	var input;
	var count = 0;
	
	for (var i = 0; i < newWords.length; i ++) {
		if ( newWords[i] ) {
			input = document.createElement('input');
			input.setAttribute('name', 'new-word-' + count + '-name');
			input.setAttribute('value', newWords[i].name);
			postForm.appendChild(input);
			
			input = document.createElement('input');
			input.setAttribute('name', 'new-word-' + count + '-type');
			input.setAttribute('value', newWords[i].type);
			postForm.appendChild(input);

			count ++;
		}
	}
	
	input = document.createElement('input');
	input.setAttribute('name', 'numOfNewWords');
	input.setAttribute('value', count);
	postForm.appendChild(input);

	window.open('', '_self', ''); //bug fix
	window.close();
	postForm.submit();
}

</script>

	<input type='button' onclick='submitNewWords()' value='提交'>
</body>
</html>